<script setup>
import { ref, watch, defineEmits } from 'vue'

const props = defineProps({
  chartType: {
    type: String,
    required: true,
  },
  chartTitle: {
    type: String,
    default: '',
  },
  // 表单配置
  formConfig: {
    type: Object,
    default: () => ({}),
  },
  // 是否显示操作按钮
  showActions: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['edit', 'add', 'refresh', 'form-submit'])

const chartData = ref([])
const showFormDialog = ref(false)
const currentFormType = ref('') // 'edit' or 'add'
const formData = ref({})

// 根据数值设置柱状图颜色
const getBarColor = (value, type) => {
  if (type === 'vital_signs') {
    if (value < 60) {
      return '#ff4d4f'
    } else if (value > 100) {
      return '#faad14'
    } else {
      return '#52c41a'
    }
  } else if (type === 'blood_tests') {
    if (value > 126) {
      return '#ff4d4f'
    } else if (value > 100) {
      return '#faad14'
    } else {
      return '#52c41a'
    }
  } else {
    return '#409eff'
  }
}

// 生成模拟数据
const generateChartData = (type) => {
  const data = []
  const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

  const configs = {
    vital_signs: { range: [60, 100], unit: 'bpm', divisor: 10 },
    body_composition: { range: [50, 60], unit: '%', divisor: 2, decimal: true },
    blood_tests: { range: [100, 150], unit: 'mg/dL', divisor: 10 },
    daily_activities: { range: [5000, 10000], unit: '步', divisor: 100 },
    health_assessments: { range: [3, 5], unit: '分', divisor: 2, decimal: true },
  }

  const config = configs[type] || { range: [0, 100], unit: '', divisor: 10 }

  days.forEach((day) => {
    let value = Math.random() * (config.range[1] - config.range[0]) + config.range[0]
    if (config.decimal) {
      value = Number(value.toFixed(1))
    } else {
      value = Math.floor(value)
    }
    data.push({
      day,
      value,
      unit: config.unit,
    })
  })

  return data
}

// 按钮点击处理
const handleEdit = () => {
  currentFormType.value = 'edit'
  formData.value = {} // 可以在这里设置编辑的初始数据
  showFormDialog.value = true
  emit('edit')
}

const handleAdd = () => {
  currentFormType.value = 'add'
  formData.value = {} // 重置表单数据
  showFormDialog.value = true
  emit('add')
}

const handleRefresh = () => {
  chartData.value = generateChartData(props.chartType)
  emit('refresh')
}

const handleFormSubmit = (data) => {
  emit('form-submit', {
    type: currentFormType.value,
    data: data,
    chartType: props.chartType,
  })
  showFormDialog.value = false
}

const handleFormCancel = () => {
  showFormDialog.value = false
}

// 监听图表类型变化
watch(
  () => props.chartType,
  (newType) => {
    chartData.value = generateChartData(newType)
  },
  { immediate: true },
)
</script>

<template>
  <div class="chart-container">
    <!-- 头部区域 -->
    <div class="chart-header">
      <div class="header-left">
        <h3>{{ chartTitle || chartType }}</h3>
      </div>
      <div v-if="showActions" class="header-actions">
        <button class="btn btn-edit" @click="handleEdit">
          <span class="btn-icon">✏️</span>
          编辑
        </button>
        <button class="btn btn-add" @click="handleAdd">
          <span class="btn-icon">➕</span>
          添加
        </button>
        <button class="btn btn-refresh" @click="handleRefresh">
          <span class="btn-icon">🔄</span>
          刷新
        </button>
      </div>
    </div>

    <!-- 图表内容区域 -->
    <div class="chart-content">
      <div v-for="(item, index) in chartData" :key="index" class="chart-bar">
        <div class="bar-label">{{ item.day }}</div>
        <div
          class="bar"
          :style="{
            height: `${item.value / (chartType === 'body_composition' || chartType === 'health_assessments' ? 2 : 10)}px`,
            backgroundColor: getBarColor(item.value, chartType),
          }"
        >
          <span class="bar-value">{{ item.value }}{{ item.unit }}</span>
        </div>
      </div>
    </div>

    <!-- 动态表单对话框 -->
    <div v-if="showFormDialog" class="form-dialog-overlay" @click="handleFormCancel">
      <div class="form-dialog" @click.stop>
        <div class="dialog-header">
          <h4>{{ currentFormType === 'edit' ? '编辑' : '添加' }} {{ chartTitle }}</h4>
          <button class="btn-close" @click="handleFormCancel">×</button>
        </div>
        <div class="dialog-content">
          <!-- 插槽：表单内容 -->
          <slot
            name="form"
            :formType="currentFormType"
            :formData="formData"
            :chartType="chartType"
            :onSubmit="handleFormSubmit"
            :onCancel="handleFormCancel"
          >
            <!-- 默认表单插槽内容 -->
            <div class="default-form">
              <p>请为 {{ chartTitle }} 组件提供表单插槽内容</p>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  padding: 24px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

.header-left h3 {
  margin: 0;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-edit {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.btn-edit:hover {
  background-color: #bae7ff;
}

.btn-add {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.btn-add:hover {
  background-color: #d9f7be;
}

.btn-refresh {
  background-color: #f9f0ff;
  color: #722ed1;
  border: 1px solid #d3adf7;
}

.btn-refresh:hover {
  background-color: #efdbff;
}

.btn-icon {
  font-size: 14px;
}

.chart-content {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  padding: 20px 0;
}

.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.bar-label {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.bar {
  width: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-radius: 6px 6px 0 0;
  transition: all 0.3s ease;
  position: relative;
  min-height: 30px;
}

.bar-value {
  position: absolute;
  bottom: -25px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 表单对话框样式 */
.form-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.form-dialog {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.dialog-header h4 {
  margin: 0;
  color: #1a1a1a;
  font-size: 18px;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  color: #666;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.dialog-content {
  padding: 24px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.default-form {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 根据数值设置柱状图颜色 */
/*
@function getBarColor(value, type) {
  @if type == 'vital_signs' {
    @if value < 60 {
      @return #ff4d4f;
    } @else if value > 100 {
      @return #faad14;
    } @else  {
      @return #52c41a;
    }
  } @else if type == 'blood_tests' {
    @if value > 126 {
      @return #ff4d4f;
    } @else if value > 100 {
      @return #faad14;
    } @else  {
      @return #52c41a;
    }
  } @else  {
    @return #409eff;
  }
}
*/
</style>
